<template>
  <main @keydown.enter="regisrerBt">
    <div class="login-title">
      <h1>注册账号</h1>
    </div>
    <div class="login-container">
      <input type="text" placeholder="账号" v-model="tmpAccount.account">
      <input type="password" placeholder="密码" v-model="tmpAccount.password">
      <input type="password" placeholder="重新输入一次密码" v-model="tmpAccount.rePassword">
    </div>
    <div class="login-bt">
      <button class="login-button" @click="regisrerBt">注册</button>
    </div>
  </main>
</template>

<script setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref} from 'vue';

import {useRouter} from "vue-router";

import useUserInfoStore from "../stores/user.js";
import { storeToRefs } from "pinia";
const userInfoStore = useUserInfoStore();
const { accounts} = storeToRefs(userInfoStore);

const router = useRouter();
  const tmpAccount = reactive({
    account:"",
    password:"",
    rePassword:""
  })
  const regisrerBt = () => {
    if(tmpAccount.password != tmpAccount.rePassword){
      window.alert("两次密码不一致请重新输入！！！");
      return ;
    }
    for(let i = 0;i < accounts.value.length;i ++){
      if(accounts.value[i].account == tmpAccount.account){
        window.alert("账号已存在！！！");
        return ;
      }
    }
    userInfoStore.accounts.push({
      id:accounts.value.length + 1,
      account: tmpAccount.account,
      password: tmpAccount.password,
      userName: "cck" + (accounts.value.length + 1),
      userImg:"/src/assets/defaultPic.jpg",
      info:"爷的帅不值一提！！！"
    })
    window.alert("注册成功，请登录。");
    router.push('/login');
  };
  // 生命周期钩子
  onBeforeMount(()=>{
    console.log("rj",'挂载之前');
    document.querySelector('body').setAttribute('style', 'background-color:#eeedf1');
  });
  onBeforeUnmount(()=>{
    console.log('卸载之前');
    document.querySelector('body').removeAttribute('style')
  });
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;

  }
  main {
    width: 700px;
    height: 500px;
    justify-items: center;
    background-color: white;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .login-title {
    color: #FF5000;
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
  }
  input {
    background-color: #f1f4f7;
    margin-top: 10px;
    width: 60%;
    height: 25%;
    border: 0;
    border-radius: 10px;
    padding-left: 3%;
  }
  input:hover {
    background-color: #c8c8c9;
  }

  input:focus {
    outline: none;
    background-color: #c8c8c9;
  }
  .login-bt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
  }
  .login-button {
    display: inline-block;
    width: 63%;
    height: 50%;
    background-color: #FF5000;
    color: white;
    border: 0;
    margin-bottom: 20px;
    font-size: 20px;
  }
  button:focus {
    outline: none;
  }
  button:hover {
    background-color: #ed320c;
  }
</style>